<template>
    <el-card shadow="always">
        <div class="navContainer">
            <div class="navButton">
                <button style="margin-left: 30px;" class="active" @click="allList">全部</button>
                <button @click="getfound">我创建的</button>
                <button @click="getMyadd">我加入的</button>
                <button @click="getMyclass">我课程的</button>
                <button class="radius" @click="centerDialogVisible=true">创建</button>
            </div>
        </div>
    </el-card>
    <el-card shadow="always" style="margin-top:10px ">
        <div class="imgContainer" style="width: 960;height:600px;" v-if="Roomstore.roomList.length==0">
            <div class="imgView">
                <img src="../../../assets/2.png">
                <span>无更多数据</span>
            </div>

        </div>
        <!-- 有课程的话 -->
        <div class="loadMoreList" v-else>
            <div class="loadMoreItem" @click="torommItem(roomItem.id)" v-for="(roomItem,index) in Roomstore.roomList"
                :key="index">
                <div class="left">
                    <img :src="roomItem.cover" alt="">
                </div>
                <div class="center">
                    <span>{{roomItem.planName}}</span>
                    <div>已练习{{roomItem.weekTrainedCount}}次{{roomItem.planAddCount}}分钟</div>
                </div>
                <div class="rigth">
                    <div v-if="roomItem.weekTrainedCount==0 && roomItem.planAddCount==0">
                        <svg t="1666191461917" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="1694" width="16" height="16">
                            <path
                                d="M810.137703 213.860762c-164.388001-164.4187-431.887404-164.4187-596.277452 0-164.417677 164.388001-164.417677 431.889451 0 596.278475 164.390048 164.417677 431.890474 164.417677 596.277452 0C974.557426 645.750213 974.557426 378.248763 810.137703 213.860762zM767.347131 767.345596c-140.797723 140.829446-369.927237 140.797723-510.693238 0-140.828422-140.797723-140.828422-369.895515 0-510.708588 140.767024-140.783397 369.896538-140.813073 510.693238 0C908.14383 397.420405 908.14383 626.578572 767.347131 767.345596z"
                                p-id="1695" fill="#e89abe"></path>
                            <path
                                d="M721.450824 521.495258 515.404028 521.495258l0.028653-227.948619c0-15.124466-12.362562-27.458375-27.501354-27.458375s-27.443026 12.33391-27.443026 27.458375l0 235.115855c0 0.835018-1.013073 20.48659 12.094456 34.459836 8.331759 8.809643 20.038382 13.288654 35.148521 13.288654l213.720569 0.031722c15.140839 0 27.472702-12.304234 27.472702-27.474748C748.922503 533.887496 736.620315 521.584286 721.450824 521.495258z"
                                p-id="1696" fill="#e89abe"></path>
                        </svg>
                        <div>未开始</div>
                    </div>
                    <div v-else>
                        <svg t="1666319895860" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="1677" width="16" height="16">
                            <path
                                d="M395.765333 586.570667h-171.733333c-22.421333 0-37.888-22.442667-29.909333-43.381334L364.768 95.274667A32 32 0 0 1 394.666667 74.666667h287.957333c22.72 0 38.208 23.018667 29.632 44.064l-99.36 243.882666h187.050667c27.509333 0 42.186667 32.426667 24.042666 53.098667l-458.602666 522.56c-22.293333 25.408-63.626667 3.392-54.976-29.28l85.354666-322.421333zM416.714667 138.666667L270.453333 522.581333h166.869334a32 32 0 0 1 30.933333 40.181334l-61.130667 230.954666 322.176-367.114666H565.312c-22.72 0-38.208-23.018667-29.632-44.064l99.36-243.882667H416.714667z"
                                p-id="1678" fill="#db639b"></path>
                        </svg>
                        <div>进行中</div>
                    </div>
                </div>
            </div>

        </div>

        <!-- 登录对话框 -->

        <el-dialog v-model="centerDialogVisible" width="23%" center>
            <img src="../../../assets/login.jpg">

        </el-dialog>
    </el-card>


</template>

<script setup lang="ts">
// 引入接口
import { reqRoomList, reqroomItem, reqfound, reqmyAdd, reqMyclass } from '../../../api/room/index'
import { ref, onMounted, reactive } from 'vue'

import router from '../../../router'
// 引入仓库
import useRoomstore from '../../../stores/room'
const centerDialogVisible = ref(false)
// 组测仓库
const Roomstore = useRoomstore()
// // 我创建的数据
// const foundList=ref([])

// 挂载时发送请求,获取练习室全部数据
onMounted(() => {
    Roomstore.getRoomList()
})

// 点击全部按钮
const allList = async () => {
    // 清空roomList数据
    Roomstore.roomList = []

    // 发送请求
    const result = await reqRoomList()
    // console.log(result);
    if (result.status) {
        Roomstore.roomList = result.data.content
    }
}

// 点击我加入的
const getMyadd = async () => {
    // 清空roomList数据
    Roomstore.roomList = []
    const result = await reqmyAdd()
    // console.log(result);
    if (result.status) {
        Roomstore.roomList = result.data.content
    }

}
// 点击我创建的
const getfound = async () => {
    // 清空roomList数据
    Roomstore.roomList = []
    // 发送请求
    const result = await reqfound()
    // console.log(result);
    if (result.status) {
        Roomstore.roomList = result.data.content
    }
}

// 点击我的课程
const getMyclass = async () => {
    // 清空roomList数据
    Roomstore.roomList = []
    // 发送请求
    const result = await reqMyclass()
    // console.log(result);
    if (result.status) {
        Roomstore.roomList = result.data.content
    }
}

// 点击跳转到详情页面
const torommItem = async (id) => {
    Roomstore.torommItem(id)
    // 跳转路由
    router.push({
        path: '/room/roomitem'
    })
}

</script>

<style scoped>
.dialog-footer button:first-child {
    margin-right: 10px;
}

.navContainer {}

.navContainer .navButton {
    width: 1020px;
    height: 96px;
}

.navContainer .navButton button {
    display: inline-block;
    margin-top: 30px;
    cursor: pointer;
    font-size: 14px;
    border-radius: 4px;
    color: #7d8090;
    padding: 7px 12px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-right: 24px;
    margin-bottom: 10px;
    border: none;
}

.navContainer .navButton button:hover {
    background-color: #F93684;
    color: white;
}

.navContainer .navButton .active {
    background-color: #F93684;
    color: white;
}

.navContainer .navButton .radius {
    margin-left: 340px;
    width: 84px;
    height: 32px;
    border-radius: 16px;
    background-color: #F93684;
    text-align: center;
    color: white;
    line-height: 15px;
}

.imgContainer .imgView {
    display: flex;
    flex-direction: column;
    text-align: center;
    margin-top: 220px;
}

.imgContainer .imgView img {
    display: block;
    margin: auto;
    width: 225px;
    height: 225px;
}

.imgContainer .imgView span {
    margin-top: 20px;
    color: #B1B5C1;
}

/*数据列表样式*/
.loadMoreList {

    margin: 0 20px
}

.loadMoreList .loadMoreItem {
    width: 960px;
    height: 102px;
    display: flex;
    padding: 20px 0;
    border-bottom: .5px solid #90919b;
}

.loadMoreList .loadMoreItem .left {}

.loadMoreList .loadMoreItem .left img {
    width: 169px;
    height: 101px;
    border-radius: 5px;
    margin-right: 20px;
}

.loadMoreList .loadMoreItem .center {
    width: 150px;
    height: 100px;
}

.loadMoreList .loadMoreItem .center span {
    width: 100px;
    height: 18px;
    font-weight: 700;
    font-size: 15px;
}

.loadMoreList .loadMoreItem .center div {
    margin-top: 25px;
    font-size: 15px;
    color: #7d8090;
}

.loadMoreList .loadMoreItem .rigth {
    margin-left: 550px;
    margin-top: 20px;
    font-size: 15px;
    color: #7d8090;
}

.loadMoreList .loadMoreItem .rigth svg {
    margin-left: 15px;
}
</style>